<template>
	<div>
		<el-form label-width="80px">
		  <el-form-item label="x">
		    <el-input-number v-model="ddr.transform.x" @change="handleChangeTransform('x',$event)"></el-input-number>
		  </el-form-item>
		  <el-form-item label="y">
		    <el-input-number v-model="ddr.transform.y" @change="handleChangeTransform('y',$event)"></el-input-number>
		  </el-form-item>
		  <el-form-item label="width">
		    <el-input-number v-model="ddr.transform.width" @change="handleChangeTransform('width',$event)"></el-input-number>
		  </el-form-item>
		  <el-form-item label="height">
		    <el-input-number v-model="ddr.transform.height" @change="handleChangeTransform('height',$event)"></el-input-number>
		  </el-form-item>
		  <el-form-item label="rotation">
		    <el-input-number v-model="ddr.transform.rotation" @change="handleChangeTransform('rotation',$event)"></el-input-number>
		  </el-form-item>
			<el-form-item label="draggable">
			  <el-switch v-model="ddr.draggable"></el-switch>
			</el-form-item>
			<el-form-item label="rotatable">
			  <el-switch v-model="ddr.rotatable"></el-switch>
			</el-form-item>
			<el-form-item label="resizable">
			  <el-switch v-model="ddr.resizable"></el-switch>
			</el-form-item>
			<el-form-item label="active">
			  <el-switch v-model="ddr.active"></el-switch>
			</el-form-item>
			<el-form-item label="acceptRatio">
			  <el-switch v-model="ddr.acceptRatio"></el-switch>
			</el-form-item>
			<el-form-item label="axis">
			  <el-checkbox-group v-model="axis" @change="handleChangeAxis">
					<el-checkbox label="x" value="x"></el-checkbox>
					<el-checkbox label="y" value="y"></el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			
		</el-form>
		
		<DDR
			:draggable="ddr.draggable"
			:rotatable="ddr.rotatable"
			:resizable="ddr.resizable"
			:active="ddr.active"
			:acceptRatio="ddr.acceptRatio"
			:parent="ddr.parent"
			:id="ddr.id"
			:value="ddr.transform"
			:grid="ddr.grid"
			:axis="ddr.axis"
			@drag="handleDrag"
			@rotate="handleRotate"
			@resize="handleResize"
			class="myddr"
		></DDR>
	</div>
</template>

<script>
	
	export default {
		name: 'Layout',
		data() {
			return {
				axis: ['x','y'],
				ddr: {
					draggable: true,
					rotatable: true,
					resizable: true,
					active: true,
					acceptRatio: false,
					parent: false,
					grid: [1,1],
					axis: 'xy', // x,y,xy
					id: Date.now(),
					transform: { x: 100, y: 100, width: 100, height: 100, rotation: 0 },
				},
				
				list: [
					// {
					//  id: 111111,	
					// 	componentType: 'BaseInput',
					// 	value: {},
					// 	props: {},
					// 	transform: {
					// 		x: 0,
					// 		y: 0,
					// 		width: 0,
					// 		height: 0,
					// 		rotation: 0,
					// 	},
					// 	style: {},
					// 	ddr: {},
					// }
				],
			}
		},
		methods: {
			handleDrag(event, transform) {
				this.ddr.transform = transform;
			},
			handleResize(event, transform) {
				this.ddr.transform = transform;
			},
			handleRotate(event, transform) {
				this.ddr.transform = transform;
			},
			
			handleChangeTransform(attr,currentValue) {
				this.ddr.transform = {
					...this.ddr.transform,
					[attr]: currentValue,
				}
			},
			handleChangeAxis(newValue) {
				this.ddr.axis = newValue.join('')
			},
		}
	}
</script>

<style scoped lang="scss">
	.myddr {
	}
</style>